<template>
    <div class="develop">
        <div class="develop_lists">
            <group>
                <cell v-for="(item,index) of currentPerson" :key="index" :title="item.applicant" :link="{name: 'Apply', params:{personid: item.id, status: $route.query.status}}">
                    <img slot="icon" src="./dangyuan.png" class="weui-cell_icon" alt="">
                </cell>
            </group>
        </div>
        <div v-transfer-dom>
          <popup v-model="isShow" position="right" @on-hide="hidePopup()">
            <div class="chooseBox">
              <div class="box_title">条件筛选</div>
              <div class="box_classify">
                <div class="box_time">
                  <!--<div class="classify_name">时间</div>-->
                  <div class="classify_date">
                    <checker v-model="selectedDate" default-item-class="normal_date" selected-item-class="selected_date">
                      <checker-item :value="item" v-for="(item, index) in dateClass" :key="index">{{item.value}}</checker-item>
                    </checker>
                    <group>
                      <datetime v-model="startDate" title="开始日期" clear-text="今天" @on-clear="setToday"></datetime>
                    </group>
                    <group class="endDate">
                      <datetime v-model="endDate" title="结束日期"></datetime>
                    </group>
                  </div>
                </div>
                <div class="box_name">
                  <!--<div class="classify_name">支部名称</div>-->
                  <div class="classify_search" style="margin-bottom: 2.8rem; margin-top: 2.8rem;">
                    <group>
                      <selector v-model="selectedBranch" :value-map="['id', 'department']" :options="ajaxBranch" placeholder="全部支部"></selector>
                    </group>
                    <!-- <model-list-select :list="ajaxBranch"
                             option-value="id"
                             option-text="department"
                             v-model="selectedBranch"
                             placeholder="全部"
                             @searchchange="searchBranch">
                    </model-list-select> -->
                  </div>
                  <!--<div class="classify_name">申请人</div>-->
                  <div class="classify_search" style="margin-bottom: 2.8rem; margin-top: 2.8rem;">
                    <group>
                      <selector id="selectPeople" v-model="selectedPeople" :value-map="['applicant', 'applicant']" :options="ajaxPeople" placeholder="全部党员"></selector>
                    </group>
                    <!-- <model-list-select :list="ajaxPeople"
                             option-value="id"
                             option-text="applicant"
                             v-model="selectedPeople"
                             placeholder="全部"
                             @searchchange="searchPeople">
                    </model-list-select> -->
                  </div>
                </div>
              </div>
              <div class="box_button">
                <x-button type="primary" @click.native="choosedData">确定</x-button>
              </div>
            </div>
          </popup>
        </div>
    </div>
</template>

<script>
import {
  TransferDom,
  Group,
  Cell,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  Selector,
  XButton
} from "vux";
// import { ModelListSelect } from "vue-search-select";
import { mapState, mapGetters } from "vuex";
export default {
  directives: {
    TransferDom
  },
  components: {
    Group,
    Cell,
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    Selector,
    // ModelListSelect,
    XButton
  },
  computed: {
    ...mapGetters([
      "developPopup",
      "applyList",
      "branchList",
      "developSelect",
      "applyNum"
    ])
  },
  created() {
    this.$store.dispatch("getBranchList");
  },
  activated() {
    this.userid = window.localStorage.getItem("user");
    if (this.$route.query.status == "apply") {
      this.$store.dispatch("getApplyList", { cate: 1, user_id: this.userid });
    } else if (this.$route.query.status == "positive") {
      this.$store.dispatch("getApplyList", { cate: 2, user_id: this.userid });
    } else if (this.$route.query.status == "prep") {
      this.$store.dispatch("getApplyList", { cate: 3, user_id: this.userid });
    }
    this.ajaxBranch = this.branchList;
  },
  deactivated() {
    this.currentPerson = [];
    this.ajaxBranch = [];
  },
  data() {
    return {
      userid: "",
      currentPerson: [],
      isShow: false,
      selectedDate: { key: 1, value: "本月" },
      dateClass: [
        {
          key: 1,
          value: "本月"
        },
        {
          key: 2,
          value: "本季度"
        },
        {
          key: 3,
          value: "本年"
        }
      ],
      startDate: "",
      endDate: "",
      ajaxBranch: [],
      selectedBranch: "",
      searchText: "",
      ajaxPeople: [],
      selectedPeople: "",
      searchText2: ""
    };
  },
  watch: {
    developPopup: function(val) {
      this.isShow = val;
    },
    applyList: function(val) {
      this.currentPerson = val;
      this.ajaxPeople = val;
    },
    branchList: function(val) {
      this.ajaxBranch = val;
    },
    developSelect: function(val) {
      this.currentPerson = val.data;
      if (this.$route.query.status == "apply") {
        this.applyNum[0].num = val.count;
      } else if (this.$route.query.status == "positive") {
        this.applyNum[1].num = val.count;
      } else if (this.$route.query.status == "prep") {
        this.applyNum[2].num = val.count;
      }
    },
    startDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    endDate: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    selectedDate: function(val) {
      if (Object.keys(val).length) {
        this.startDate = "";
        this.endDate = "";
      }
    },
    $route(to, from) {
      if (to.query.status == "apply") {
        this.$store.dispatch("getAppLyNum", { user_id: this.userid });
        this.$store.dispatch("getApplyList", { cate: 1, user_id: this.userid });
      } else if (to.query.status == "positive") {
        this.$store.dispatch("getAppLyNum", { user_id: this.userid });
        this.$store.dispatch("getApplyList", { cate: 2, user_id: this.userid });
      } else if (to.query.status == "prep") {
        this.$store.dispatch("getAppLyNum", { user_id: this.userid });
        this.$store.dispatch("getApplyList", { cate: 3, user_id: this.userid });
      }
    }
  },
  methods: {
    hidePopup() {
      this.$store.dispatch("updateDevelopPopup", {
        developPopup: false
      });
    },
    setToday(value) {
      let now = new Date();
      let cmonth = now.getMonth() + 1;
      let day = now.getDate();
      if (cmonth < 10) cmonth = "0" + cmonth;
      if (day < 10) day = "0" + day;
      this.startDate = now.getFullYear() + "-" + cmonth + "-" + day;
    },
    searchBranch(searchText) {
      this.searchText = searchText;
    },
    searchPeople(searchText) {
      this.searchText2 = searchText;
    },
    choosedData() {
      if (!this.selectedDate && !this.startDate && !this.endDate) {
        this.$vux.toast.text("请选择时间", "middle");
      } else if (this.startDate && !this.endDate) {
        this.$vux.toast.text("请选择结束时间", "middle");
      } else if (!this.startDate && this.endDate) {
        this.$vux.toast.text("请选择开始时间", "middle");
      } else {
        this.$store.dispatch("updateDevelopPopup", {
          developPopup: false
        });
        if (this.$route.query.status == "apply") {
          this.$store.dispatch("getDevelopSelect", {
            cate: 1,
            time: this.selectedDate.key,
            start: this.startDate,
            end: this.endDate,
            department_id: this.selectedBranch,
            applicant: this.selectedPeople
          });
        } else if (this.$route.query.status == "positive") {
          this.$store.dispatch("getDevelopSelect", {
            cate: 2,
            time: this.selectedDate.key,
            start: this.startDate,
            end: this.endDate,
            department_id: this.selectedBranch,
            applicant: this.selectedPeople
          });
        } else if (this.$route.query.status == "prep") {
          this.$store.dispatch("getDevelopSelect", {
            cate: 3,
            time: this.selectedDate.key,
            start: this.startDate,
            end: this.endDate,
            department_id: this.selectedBranch,
            applicant: this.selectedPeople
          });
        }
        this.selectedDate = { key: 1, value: "本月" };
        this.startDate = "";
        this.endDate = "";
        this.selectedBranch = "";
        this.selectedPeople = "";
      }
    }
  }
};
</script>

<style lang="less">
.develop {
  width: 100%;
  min-height: 100%;
  padding: 2.75rem 0 0;
  font-size: 0;
  background: rgb(245, 245, 249);
  .develop_lists {
    padding: 0.5rem 0 0;
    .weui-cells {
      margin: 0;
    }
    .weui-cell {
      padding: 0.75rem 1.125rem 0.75rem 0.8125rem;
    }
    .vux-label {
      font-size: 1.125rem;
    }
    .weui-cell_icon {
      display: block;
      width: 1.6875rem;
      margin-right: 0.375rem;
    }
  }
  .box_name {
    .classify_search {
      margin-bottom: 50px;
    }
  }
}
</style>
